<!--建立考核模板首页 -->
<template>
  <div style="background: #F4F5FC;">
    <div v-if="!createThree1">
      <el-card style="height: 860px; margin: 10px" v-if="!createThree">
        <!-- 考核模板 -->
        <el-row style="display: flex;justify-content:space-between;align-items: center;">
          <el-row class="createMUban" style="width:800px">
            <el-row>
              <el-button @click="addEquipment()" type="primary" size="small">+ 新增</el-button>
              <el-button @click="deleteSelected()" style="
           background-color: #E86565;
           color: #fff;
       border-radius:4px
        height: 32px;
      line-height: 6px;
      margin-bottom: 10px;
      " :disabled="deletes">批量删除</el-button>
            </el-row>
            <el-form style="display:flex;padding-top:15px;margin-left:10px">
              <el-form-item label="年份" style="line-height:15px">
                <el-date-picker style="width:78%;" type="year" value-format="yyyy" format="yyyy年" v-model="ruleForm.year"
                  placeholder="请选择"></el-date-picker>
              </el-form-item>
              <el-form-item label="专项">
                <el-select clearable style="width:78%;" v-model="ruleForm.name" placeholder="请选择">
                  <el-option v-for="item in tableData1" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-button @click="sousuo()" type="primary"
                style="height:32px; padding:8px 20px;margin-top:4px">搜索</el-button>
            </el-form>
          </el-row>
          <el-row style="margin-left:45%;align-items: center;width:200px">
            <el-badge>
              <el-button type="text" style="color:#3B95FF;font-size:14px" icon="el-icon-eleme"
                @click.native.prevent="settingAll()">统计图表</el-button>
            </el-badge>

            <el-badge :hidden="nums == 0 ? true : false" :value="nums" :max="99" class="item" style="margin-left:5px"
              :style="{ opacity }">
              <el-button style="color:#EF7045;font-size:14px" type="text" icon="el-icon-message-solid"
                @click="messageOpen()">预算提醒</el-button>
            </el-badge>
          </el-row>
        </el-row>

        <!-- 表格信息 -->
        <el-row>
          <el-table :data="tableData" style="width: 100%; color: #333333;font-size: 14px" height="700" align="center"
            :header-cell-style="{ background: '#ECF1F9' }" @selection-change="handleSelectionChangeDepartment">
            <el-table-column type="selection" width="80" align="center"></el-table-column>
            <el-table-column fixed type="index" align="center" label="序号" width="80"></el-table-column>
            <el-table-column prop="year" align="center" label="年份" width="120"></el-table-column>
            <el-table-column prop="name" align="center" label="业务专项"></el-table-column>
            <el-table-column prop="budgetOutlays" align="center" label="下达资金(预算支出)"></el-table-column>
            <el-table-column prop="unit" align="center" label="下达单位"></el-table-column>
            <el-table-column prop="actualOutlay" align="center" label="实际已支出"></el-table-column>
            <el-table-column prop="surplus" align="center" label="剩余款项"></el-table-column>
            <el-table-column prop="usageRate" align="center" label="使用率" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.usageRate + '%' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" align="center" label="更新时间"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="220">
              <template slot-scope="scope">
                <!-- @click.native.prevent="editRow(scope.row)" -->
                <el-button type="text" size="small" style="color: #35A06D" @click="lookMoney(scope.row)">经费查看</el-button>
                <el-button type="text" size="small" style="color: #EF7045"
                  @click="remenberMoney(scope.row)">经费登记</el-button>
                <el-button type="text" size="small" style="color: #3B95FF" @click="editMoney(scope.row)">编辑</el-button>
                <el-button type="text" size="small" style="color: #E86565" @click="delMoney(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row v-if="!createThree">
            <el-pagination style="text-align: right;margin-top:16px" background @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10]" :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </el-row>
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹层 -->
    <el-dialog title="新增业务专项" @close="closeTargets('ruleForm1')" :visible.sync="centerDialogVisible" width="20%"
      style="border-radius:10px" center>
      <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="业务专项:" prop="name">
          <el-input style="width:94%;" v-model="ruleForm1.name"></el-input>
        </el-form-item>
        <el-form-item label="年份:" prop="year">
          <el-date-picker type="year" value-format="yyyy" format="yyyy年" v-model="ruleForm1.year"
            placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="下达资金:" prop="budgetOutlays">
          <el-input style="width:94%;" v-model="ruleForm1.budgetOutlays"
            onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
        </el-form-item>
        <el-form-item label="下达单位:" prop="unit">
          <el-input style="width:94%;" v-model="ruleForm1.unit"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTargets('ruleForm1')" style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              ">取 消</el-button>
        <el-button type="primary" @click="addTargets('ruleForm1')" style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹层  -->
    <el-dialog title="编辑业务专项" @close="closeTargets2('ruleForm2')" :visible.sync="centerDialogVisible2" width="20%"
      style="border-radius:10px" center>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="业务专项:" prop="name">
          <el-input style="width:94%;" v-model="ruleForm2.name"></el-input>
        </el-form-item>
        <el-form-item label="年份:" prop="year">
          <el-date-picker type="year" value-format="yyyy" format="yyyy年" v-model="ruleForm2.year"
            placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="下达资金:" prop="budgetOutlays">
          <el-input style="width:94%;" v-model="ruleForm2.budgetOutlays"
            onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
        </el-form-item>
        <!-- <el-form-item label="实际已支出:" prop="actualOutlay">
          <el-input
            v-model="ruleForm2.actualOutlay"
            onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"
          ></el-input>
        </el-form-item>-->
        <el-form-item label="下达单位:" prop="unit">
          <el-input style="width:94%;" v-model="ruleForm2.unit"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTargets2('ruleForm2')" style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              ">取 消</el-button>
        <el-button type="primary" @click="addTargets2('ruleForm2')" style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 经费登记 -->
    <el-dialog title="经费登记" @close="closeTargets3()" :visible.sync="centerDialogVisible3" width="70%"
      style="border-radius:10px" center>
      <el-row>
        <p style="font-weight:800;font-size:14px">
          业务专项:
          <span style="color:#999999 ">{{ business }}</span>
        </p>
      </el-row>
      <el-row>
        <div>经费内容（资金单位为: 元）</div>
      </el-row>
      <el-row>
        <el-form size="small" :disabled="isdisabled">
          <el-form-item prop="servin">
            <template>
              <!--  :row-class-name="rowClassName" -->
              <el-table ref="table" border :data="applayList" style="width: 100%;margin-top:10px">
                <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
                <el-table-column prop="name" label="项目实施内容">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" :disabled="isdisabled"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="budgetOutlaysDetails" label="预算支出">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.budgetOutlaysDetails" :disabled="isdisabled"
                      onkeyup="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="actualOutlayDetails" label="实际支出">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.actualOutlayDetails" :disabled="isdisabled"
                      onkeyup="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="surplusDetails" label="剩余款项">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.surplusDetails = scope.row.budgetOutlaysDetails - scope.row.actualOutlayDetails"
                      :disabled="!isdisabled"
                      onkeyup="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="usageRateDetails" label="使用率">

                  <template slot-scope="scope">
                    <!-- {{ scope.row.actualOutlayDetails / scope.row.budgetOutlaysDetails }} -->
                    <!-- ((scope.row.actualOutlayDetails / scope.row.budgetOutlaysDetails) * 100).toFixed(2)+'%' -->
                    <el-input
                      v-model="((scope.row.actualOutlayDetails / scope.row.budgetOutlaysDetails) * 100).toFixed(2) == 'NaN' || scope.row.budgetOutlaysDetails == 0 ? scope.row.usageRateDetails = '/' : scope.row.usageRateDetails = ((scope.row.actualOutlayDetails / scope.row.budgetOutlaysDetails) * 100).toFixed(2) + '%'"
                      :disabled="!isdisabled"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="支出时间" width="246">
                  <template slot-scope="scope">
                    <el-date-picker :disabled="isdisabled" v-model="scope.row.createTime" type="datetime"
                      format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间"></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="applaydeleteRow(scope.$index, applayList)" :disabled="isdisabled"
                      size="small">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-row style="border:0;">
                <el-col style="text-align:center;">
                  <el-button :disabled="isdisabled" style="border-top:none;width:100px; position: relative;bottom:2px"
                    @click="applayaddRow(applayList)">+</el-button>
                </el-col>
              </el-row>
            </template>
          </el-form-item>
          <el-form-item label="备注:" prop="remarks">
            <el-input v-model="remarks"></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTargets3()" style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              ">取 消</el-button>
        <el-button type="primary" @click="addTargets3()" style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看经费 -->
    <el-drawer title="查看经费" size="50%" :visible.sync="centerDialogVisible4">
      <div style="margin:0px 15px 15px 20px">
        <el-row>
          <p style="font-weight:800;font-size:16px">
            业务专项:
            <span style="color:#999999 ">{{ business }}</span>
          </p>
        </el-row>
        <el-row>
          <div>经费内容（资金单位为: 元）</div>
        </el-row>
        <el-row>
          <el-form size="small" :disabled="isdisabled">
            <el-form-item prop="servin">
              <template>
                <!--  :row-class-name="rowClassName" -->
                <el-table ref="table" border :data="applayList1" style="width: 100%;margin-top:10px">
                  <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
                  <el-table-column prop="name" label="项目实施内容"></el-table-column>
                  <el-table-column prop="budgetOutlaysDetails" label="预算支出"></el-table-column>
                  <el-table-column prop="actualOutlayDetails" label="实际支出"></el-table-column>
                  <el-table-column prop="surplusDetails" label="剩余款项"></el-table-column>
                  <el-table-column prop="usageRateDetails" label="使用率">
                    <template slot-scope="scope">
                      <span>{{ scope.row.budgetOutlaysDetails == '0' ? '/' : scope.row.usageRateDetails + '%' }} </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="支出时间" width="246"></el-table-column>
                </el-table>
              </template>
            </el-form-item>
            <el-row>
              <h5>
                备注:
                <span>{{ remarks }}</span>
              </h5>
            </el-row>
            <el-row>
              <el-pagination style="text-align: right;margin-top:16px" background @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" :current-page="pageNum1" :page-sizes="[5, 10]"
                :page-size="pageSize1" layout="sizes, prev, pager, next, jumper" :total="total1"></el-pagination>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </el-drawer>
    <!-- 预算提醒 -->
    <jilu v-if="createThree" @fatherMethod="fatherMethod"></jilu>
    <!-- 图表 -->
    <chart v-if="createThree1" @fatherMethod1="fatherMethod1"></chart>
  </div>
</template>

<script>
import {
  deleteAllMoney,
  getAllkyFundManagement,
  deleteMoney,
  addMoney,
  editMoney,
  getAllkyFundManagementList,
  getManagementList,
  addManagement,
  getyiduList,
} from "@/api2/keyan"; //
import jilu from "./componenets/jilu.vue";
import chart from "./componenets/chart.vue";
// import lookStep from "./components/lookStep.vue";
import { userList } from "../../api/user";
import { getToken } from "@/utils/auth";

const base_url = process.env.VUE_APP_BASE_APITwo;
export default {
  components: {
    jilu: jilu,
    chart: chart
    // lookStep: lookStep
  },

  data() {
    return {
      opacity: 1,
      config: {
        time: "2023-7-06 10:00:00", // 每天几点执行
        interval: 1, // 隔几天执行一次
        runNow: true, // 是否立即执行
        intervalTimer: "",
        timeOutTimer: ""
      },
      //搜索表单数据
      ruleForm: {
        year: "", //年份
        name: "" //专项
      },
      ruleForm1: {
        year: "", //年份
        name: "", //专项
        budgetOutlays: "0", //专项
        unit: "",
        actualOutlay: ""
      },
      ruleForm2: {
        id: "",
        year: "", //年份
        name: "", //专项
        budgetOutlays: "", //专项
        unit: "",
        actualOutlay: "0"
      },
      remarks: "",
      kyFundManagementIds: "",
      kyFundManagementIds1: "",
      //规则校验
      rules2: {
        //指标名称校验
        name: [
          { required: true, message: "专项名称不能为空", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        year: [{ required: true, message: "年份必选", trigger: "change" }],
        budgetOutlays: [
          { required: true, message: "下达预算不能为空", trigger: "blur" }
        ],
        budgetOutlays: [
          { required: true, message: "下达预算不能为空", trigger: "blur" }
        ],
        unit: [{ required: true, message: "请输入下达单位", trigger: "blur" }]
      },
      rules: {
        //指标名称校验
        name: [
          { required: true, message: "请输入专项名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        budgetOutlays: [
          { required: true, message: "请输入下达预算", trigger: "blur" }
        ],
        year: [{ required: true, message: "年份必选", trigger: "change" }],
        unit: [{ required: true, message: "请输入下达单位", trigger: "blur" }]
      },
      nums: 0,
      remarks: "",
      business: "", //业务专项
      years: "",
      time: 0,
      createThree: false, //
      createThree1: false, //
      deletes: true,
      multipleSelectionDepartment: [], // 用于保存选中的行
      dataTypes: {},
      nameList: [],
      nowDay: "",
      tableData1: [],
      assessUserTypes: "",
      centerDialogVisible: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      centerDialogVisible4: false,
      looks: false,
      tableDatadialog: [], //表格数据
      formLabelWidth: "78px", //label-width
      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      // tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      // }
      pageNum1: 1, //当前页
      total1: 0, //总条数
      // tableData: [], //当前页码的表格数据
      pageSize1: 10, //当前页容量
      // }
      //表格数据数组
      tableData: [],
      userList: [],

      applayList: [],
      applayList1: [],
      tableData1: [], //表单属性
      isdisabled: false,
      bcbtn: true,
      xh1: 0,
      upload: {
        headers: { Authorization: getToken(), platform: 'WEB' },
        action: base_url.substring(7) + `/myHandler/token=${getToken()}`
      },
      //webSocket
      id: 1,
      webSock: null,
      lockReconnect: false //避免重复连接
    };
  },
  mounted() { },

  created() {
    this.initWebSocket();
    this.getList(); //获取表格数据
    // this.getList1(); //获取表格数据
    this.nowtime(); //年份
    this.getyiduLists();
    // this.change();
  },
  destroyed() {
    this.websock.onclose(); //离开路由之后断开websocket连接
  },
  methods: {
    // 发送websockwt请求
    initWebSocket() {
      console.log(this.upload.action);
      let websocketUrl = "wss://" + this.upload.action;
      this.webSock = new WebSocket(websocketUrl);
      this.webSock.onopen = this.webSocketOnOpen;
      this.webSock.onerror = this.webSocketOnError;
      this.webSock.onmessage = this.webSocketOnMessage;
      this.webSock.onclose = this.webSocketClose;
    },
    webSocketOnOpen() {
      console.log("WebSocket连接成功");
      //  传递参数  不需要传参就不传
      this.webSocketSend();
    },
    webSocketOnMessage(e) {
      //接收数据
      console.log("WebSocket 接受数据");
      console.log(e);
      //将接收的数据转为json格式;
      var jsonObj = JSON.parse(e.data);
      this.messageOpen1(jsonObj);
      console.log(jsonObj);
    },
    webSocketClose(e) {
      console.log("断开连接", e);
      this.lockReconnect = false;
      this.reconnect();
    },
    webSocketOnError(e) {
      console.log("报错信息", e);
    },
    webSocketSend() {
      //发送数据发送
      this.webSock.send();
    },
    // 断开重连操作
    reconnect() {
      if (this.lockReconnect) return;
      this.lockReconnect = true;
      let _this = this;
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        _this.initWebSocket();
        _this.lockReconnect = false;
        // _this.isOne = 1;
      }, 2000);
    },
    //获取标记数据
    async getyiduLists() {
      const res = await getyiduList();
      console.log(res);
      let arr = 0;
      res.data.forEach(item => {
        if (item.isRead == 0) {
          arr++;
        }
      });
      this.nums = arr;
    },
    change() {
      setInterval(() => {
        this.opacity -= 0.01;
        if (this.opacity <= 0) this.opacity = 1;
      }, 16);
    },
    //查看经费
    lookMoney(row) {
      this.remarks = row.remarks !== "" ? row.remarks : "暂无";
      this.business = row.name;
      this.kyFundManagementIds1 = row.id;
      this.centerDialogVisible4 = true;
      this.getJngFei();
      // const res = await getManagementList();
    },
    async getJngFei() {
      const params = {
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        kyFundManagementId: this.kyFundManagementIds1
      };
      const res = await getManagementList(params);
      console.log(res);
      if (res.code == 0) {
        this.applayList1 = res.data;
        this.total1 = res.total;
      }
    },
    //添加表格里的行(申请状态)
    applayaddRow(tableData1) {
      tableData1.push({
        name: "",
        actualOutlayDetails: Number(0),
        surplusDetails: Number(0),
        createTime: "",
        usageRateDetails: Number(0),
        // ((actualOutlayDetails / budgetOutlaysDetails) * 100).toFixed(2) + "%",
        budgetOutlaysDetails: Number(0),
        xh: this.xh1++
      });
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },

    // 经费登记
    remenberMoney(row) {
      console.log(row);
      this.kyFundManagementIds = row.id;
      this.business = row.name;
      this.centerDialogVisible3 = true;
    },
    async addTargets3() {
      console.log(this.applayList);
      this.applayList.forEach(item => {
        item.usageRateDetails = item.usageRateDetails.substring(
          0,
          item.usageRateDetails.lastIndexOf("%")
        );
      });
      console.log(this.applayList);
      const params = {
        kyFundManagementId: this.kyFundManagementIds,
        details: this.applayList,
        remarks: this.remarks
      };
      console.log(params);
      const res = await addManagement(params);
      if (res.code == 0) {
        this.$message({
          message: "登记成功",
          type: "success"
        });
      }
      this.applayList = [];
      this.getList();
      this.remarks = "";
      this.centerDialogVisible3 = false;
    },
    closeTargets3() {
      this.applayList = [];
      this.centerDialogVisible3 = false;
    },
    //记录
    messageOpen() {
      this.createThree = true;
    },
    //图表
    settingAll() {
      this.createThree1 = true;
    },
    //消息提示
    messageOpen1(e) {
      console.log(e);
      const h = this.$createElement;
      this.$notify({
        type: "warning",
        customClass: "icons",
        title: e.title,
        duration: 0,
        // iconClass: "el-icon-message-solid",
        message: h("i", { style: "color: teal;" }, e.content)
      });
    },
    //搜索
    async sousuo() {
      console.log(this.ruleForm.name, this.ruleForm.year);
      if (this.ruleForm.name == "" && this.ruleForm.year == "") {
        this.getList(); //获取表格数据
      } else {
        const params = {
          specialPurposeType: 6,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.ruleForm.name,
          year: this.ruleForm.year
        };
        const res = await getAllkyFundManagementList(params);
        if (res.code == 0) {
          this.tableData = res.data;
          this.total = res.total; //总条数
        }
      }
    },
    //确定tianjia
    addTargets(formName) {
      const kyFundManagement = {
        name: this.ruleForm1.name,
        budgetOutlays: this.ruleForm1.budgetOutlays,
        year: this.ruleForm1.year,
        unit: this.ruleForm1.unit,
        specialPurposeType: 6
      };
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await addMoney(kyFundManagement);
          if (res.code == 0) {
            this.$message({
              message: "发布成功",
              type: "success"
            });
            this.ruleForm1 = {
              year: "", //年份
              name: "", //专项
              budgetOutlays: "",
              unit: ""
            };
            this.centerDialogVisible = false;
            this.$refs[formName].resetFields();
            this.getList();
          }
        } else {
          this.$message.error("信息填写不完整!");
          return false;
        }
      });
    },
    //编辑确定

    addTargets2(formName) {
      const kyFundManagement = {
        id: this.ruleForm2.id,
        name: this.ruleForm2.name,
        budgetOutlays: this.ruleForm2.budgetOutlays,
        year: this.ruleForm2.year,
        unit: this.ruleForm2.unit,
        // actualOutlay: this.ruleForm2.actualOutlay,
        specialPurposeType: 6
      };
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await editMoney(kyFundManagement);
          if (res.code == 0) {
            this.$message({
              message: "编辑成功",
              type: "success"
            });
            this.ruleForm2 = {
              id: "",
              year: "", //年份
              name: "", //专项
              budgetOutlays: "",
              unit: "",
              actualOutlay: ""
            };
            this.centerDialogVisible2 = false;
            this.$refs[formName].resetFields();
            this.getList();
          }
        } else {
          this.$message.error("信息填写不完整!");
          return false;
        }
      });
    },
    //关闭弹层呢
    closeTargets() {
      this.ruleForm1 = {
        year: "", //年份
        name: "", //专项
        budgetOutlays: "", //专项
        unit: ""
      };
      this.centerDialogVisible = false;
    },
    //关闭弹层呢2
    closeTargets2() {
      this.ruleForm2 = {
        year: "", //年份
        name: "", //专项
        budgetOutlays: "", //专项
        unit: "",
        actualOutlay: ""
      };
      this.centerDialogVisible2 = false;
    },
    //获取当前年份
    nowtime() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear(),
        //获取当前月份
        month: nowDate.getMonth() + 1,
        //获取当前日期
        date: nowDate.getDate(),
        hh: nowDate.getHours(),
        mf:
          nowDate.getMinutes() < 10
            ? "0" + nowDate.getMinutes()
            : nowDate.getMinutes(),
        ss:
          nowDate.getSeconds() < 10
            ? "0" + nowDate.getSeconds()
            : nowDate.getSeconds()
      };
      this.nowDay =
        date.year +
        "-" +
        date.month +
        "-" +
        date.date +
        " " +
        date.hh +
        ":" +
        date.mf +
        ":" +
        date.ss;
      console.log(this.nowDay);

      // this.time = setInterval(() => {
      //   this.messageOpen1();
      // }, 6000);

      this.years = date.year;
    },
    // 用于保存选中的行
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
      if (val) {
        this.deletes = false;
      } else {
        this.deletes = true;
      }
    },
    // 批量删除
    deleteSelected() {
      this.$confirm("此操作将删除选中所有内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          let vals = this.multipleSelectionDepartment; //选中的值
          if (vals) {
            vals.map(item => {
              arr.push(item.id);
            });
          }
          const ids = { ids: arr.join() };
          deleteAllMoney(ids).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    fatherMethod() {
      this.createThree = false;
      this.getList();
      this.getyiduLists();
    },
    fatherMethod1() {
      this.createThree1 = false;
      this.getList();
      this.getyiduLists();
    },
    // 新增
    addEquipment() {
      this.centerDialogVisible = true;
    },
    // 编辑
    editMoney(row) {
      this.centerDialogVisible2 = true;
      this.ruleForm2.id = row.id;
      this.ruleForm2.year = row.year;
      this.ruleForm2.name = row.name;
      this.ruleForm2.budgetOutlays = row.budgetOutlays;
      this.ruleForm2.unit = row.unit;
      this.ruleForm2.actualOutlay = row.actualOutlay;
    },
    // 表格内查看模板的点击事件
    lookRow(rows, index) {
      console.log(rows, index);
      this.dataTypes = { rows, index };
      this.looks = true;
    },
    // 表格内删除按钮的点击事件
    delMoney(rows) {
      const id = rows.id;
      console.log(rows.id.toString());
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          console.log(id);
          deleteMoney(id).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              const totalPage = Math.ceil((this.total - 1) / this.pageSize);
              // 记住删除最后一条数据时当前码是最后一页
              const pageNums =
                this.pageNum > totalPage ? totalPage : this.pageNum;
              // 重新记录当前页码
              this.pageNum = pageNums < 1 ? 1 : pageNums;
              //删除成功 回调列表接口
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页逻辑{
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.sousuo();
    },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getJngFei();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.sousuo();
    },
    handleCurrentChange1(val) {
      this.pageNum1 = val;
      this.getJngFei();
    },
    //获取表格数据
    getList() {
      const params = {
        specialPurposeType: 6,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getAllkyFundManagementList(params)
        .then(res => {
          console.log(res);
          this.tableData = res.data;
          this.tableData1 = res.data;
          this.total = res.total; //总条数
        })
        .catch(e => {
          console.log(e);
        });
    },
    //获取所有专项
    getList1() {
      const params = {
        specialPurposeType: 6,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getAllkyFundManagement(params)
        .then(res => {
          console.log(res);
          this.tableData1 = res.data;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  background-color: #f4f5fc;
}

.createMUban {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 共同样式 */
.add_dimension {
  color: blue;
}

.delete_dimension {
  color: red;
}

.add_dimension:hover {
  color: rgb(72, 72, 234);
}

.delete_dimension:hover {
  color: rgb(245, 71, 71);
}

.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}

::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}

// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

.icons {
  background-color: red;
}

::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}

::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep [data-v-125ad6e6] .el-step.is-horizontal .el-step__line {
  opacity: 0;
}

::v-deep .el-input__inner {
  height: 32px;
}
</style>
